<template>
    <div class="ancient-poetry-card" @click="handleClickCard">
        <div class="content">
            <div class="word">{{ ancientPoetry?.quotes }}</div>
            <div class="info">
                <span>「{{ ancientPoetry?.title }}」</span><span class="author">{{ ancientPoetry?.author }}</span>
            </div>
        </div>

        <div class="wave">
            <svg
                width="700px"
                height="226px"
                viewBox="0 0 700 226"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                class="app-bg"
                style="width: 100%; height: auto">
                <title>画板</title>
                <g id="画板" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path
                        d="M1310.09105,191.626557 C1496.65509,191.626557 1770.14929,157.346326 1920,106.258614 L1920,226.585567 C1920,226.585567 57.7507064,226.769694 1.29607535,226.778064 L0,226.778064 C0.301412873,150.421181 0.452119309,112.242739 0.452119309,112.242739 C402.829314,254.28206 430.581953,106.258614 671.986104,106.258614 C913.390256,106.258614 1123.52701,191.626557 1310.09105,191.626557 Z"
                        id="路径-1"
                        fill-opacity="0.6"
                        :fill="svgColor"
                        class="water_wave_front"></path>
                    <path
                        d="M0.0139194415,226.56425 C0.0139194415,207.632936 0.00602482649,190.017506 -0.00976440346,173.717958 C-0.00976440346,173.717958 64.0945019,127.498953 182.10043,132.182456 C300.106358,136.865959 566.945531,199.128662 690.656287,199.128662 C926.193135,199.128662 1181.88325,106.258614 1429.28183,106.258614 C1676.68041,106.258614 1762.21292,199.128662 1920,132.182456 C1920,132.182456 1920,163.707219 1920,226.756746 L1918.70393,226.756746 C1862.24971,226.748377 0.0139194415,226.56425 0.0139194415,226.56425 Z"
                        id="路径-1"
                        fill-opacity="0.6"
                        :fill="svgColor"
                        class="water_wave_middle"></path>
                    <path
                        d="M1463.25587,166.368856 C1551.98939,166.368856 1579.00033,142.163535 1682.98644,125.993122 C1786.97255,109.822709 1903.42761,144.008202 1920,142.125085 L1920,226.246611 C1920,226.246611 57.7382953,226.430738 1.31380552,226.439107 L0,226.439107 C0.875870348,212.023153 1.31380552,204.815176 1.31380552,204.815176 C1.31380552,204.815176 171.201223,92.2827368 319.815615,99.6364213 C498.755382,108.490655 535.30872,172.276704 680.584032,172.276704 C825.859343,172.276704 892.163947,69.0953634 1074.42656,72.7600803 C1256.68917,76.4247971 1374.52235,166.368856 1463.25587,166.368856 Z"
                        id="路径-1"
                        fill-opacity="0.3"
                        :fill="svgColor"
                        class="water_wave_back"></path>
                </g>
            </svg>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { useHomeStore } from "@/store/home";
    import { computed, ref } from "vue";
    import { useRouter } from "vue-router";

    const homeStore = useHomeStore();
    const ancientPoetry = computed(() => homeStore.ancientPoetryData);

    function randomColor() {
        let col = "#";
        for (let i = 0; i < 6; i++) col += Math.floor(Math.random() * 16).toString(16);
        return col;
    }

    const svgColor = ref();
    svgColor.value = randomColor();

    const router = useRouter();
    const handleClickCard = () => {
        router.push("/ancientpoetrydetail");
    };
</script>

<style scoped>
    .ancient-poetry-card {
        height: 100%;
        border-radius: 16px;
        overflow: hidden;
        color: #000000;
        background-color: white;
        cursor: pointer;
    }
    .content {
        height: 100%;
        display: flex;
        flex-flow: column wrap;
        justify-content: center;
        align-items: center;
        padding: 10px;
        font-family: KaiTi;
    }
    .content .word {
        font-size: 18px;
    }
    .content .info {
        margin-top: 10px;
        font-size: 12px;
        color: rgb(156, 163, 175);
    }
    .content .info span {
        margin-right: 5px;
    }
    .info .author {
        background-color: #c20000;
        border-radius: 3px;
        color: white;
        letter-spacing: -1px;
        padding: 1px 2px;
    }
    .wave {
        position: relative;
        bottom: 60%;
    }

    /* ============波浪动画============ */
    .water_wave_back {
        animation: wave-back alternate 10s infinite ease-in-out;
    }

    .water_wave_middle {
        animation: wave-middle alternate 4s infinite ease-in-out;
    }

    .water_wave_front {
        animation: wave-front alternate 6s infinite ease-in-out;
    }

    @keyframes wave-front {
        0% {
            transform: translate(0, -10px);
        }
        100% {
            transform: translate(-100%, 10%);
        }
    }

    @keyframes wave-middle {
        100% {
            transform: translate(-100%, -10%);
        }
    }

    @keyframes wave-back {
        100% {
            transform: translate(100%, 10%);
        }
    }
</style>
